.Root {
	border-radius: 6px;
	width: 300px;
	background-color: var(--mauve-6);
	box-shadow: 0 2px 10px var(--black-a4);
}

.Item {
	overflow: hidden;
	margin-top: 1px;
	&:first-child {
		margin-top: 0;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	&:last-child {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	&:focus-within {
		position: relative;
		z-index: 1;
		box-shadow: 0 0 0 2px var(--mauve-12);
	}
}

.Header {
	all: unset;
	display: flex;
}

.Trigger {
	all: unset;
	font-family: inherit;
	background-color: transparent;
	padding: 0 20px;
	height: 45px;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	line-height: 1;
	color: var(--violet-11);
	box-shadow: 0 1px 0 var(--mauve-6);
	background-color: var(--mauve-1);
	&:hover {
		background-color: var(--mauve-2);
	}
}

.Content {
	overflow: hidden;
	font-size: 15px;
	color: var(--mauve-11);
	background-color: var(--mauve-2);
	&[data-state="open"] {
		animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
	}
	&[data-state="closed"] {
		animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
	}
}

.ContentText {
	padding: 15px 20px;
}

.Chevron {
	color: var(--violet-10);
	transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
	.Trigger[data-state="open"] > & {
		transform: rotate(180deg);
	}
}

@keyframes slideDown {
	from {
		height: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes slideUp {
	from {
		height: var(--radix-accordion-content-height);
	}
	to {
		height: 0;
	}
}
